<template>
  <div class="info-form">
    <div class="input-item">
      <label>用户名</label>
      <div class="input-item-content">
        <input placeholder="HuiAizr" type="text" name id />
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="input-item">
      <label>手机号</label>
      <div class="input-item-change">
        <div class="content">
          <span>
            <b style="color:#F56C6C">181******33</b>
          </span>
        </div>
        <div @click="toggleChangePhone" class="btn" plain type="info" round>更换手机号</div>
      </div>
    </div>
    <div class="input-item">
      <label>E-mail</label>
      <div class="input-item-content">
        <input placeholder="HuiAizr" type="text" name id />
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="input-item">
      <label>密码</label>
      <div class="input-item-change">
        <div class="content">
          <span>已设置</span>
        </div>
        <div @click="toggleChangePass" class="btn" plain type="info" round>更换密码</div>
      </div>
    </div>
    <div class="input-item">
      <label>城市</label>
      <el-form class="el-form">
        <el-form-item class="provinces">
          <el-select class="input" @change="showCityNames" v-model="province" placeholder="省级地区">
            <el-option v-for="item in provinces" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="city">
          <el-select :disabled="disabledCity" class="input" v-model="city" placeholder="市级地区">
            <el-option v-for="(item,idx) in cityNames" :key="idx" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="input-item">
      <label>我的格言</label>
      <div class="input-item-content">
        <textarea style="resize:none;height:50px;" placeholder="HuiAizr" name id />
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="input-item">
      <label>职业经历</label>
      <div class="input-item-content">
        <textarea style="resize:none;height:50px;" placeholder="HuiAizr" name id />
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="input-item">
      <div class="save">保存</div>
    </div>
    <change-phone @close-changPhone="toggleChangePhone" v-show="ChangePhone" />
    <change-pass @close-changPass="toggleChangePass" v-show="ChangePass" />
  </div>
</template>

<script>
import { getCity } from "@/api/common";
import { getMinzu } from "@/api/teacher";
import { Form, FormItem, Select, Option } from "element-ui";
export default {
  components: {
    ElFormItem: FormItem,
    ElSelect: Select,
    ElOption: Option,
    ElForm: Form,
    ChangePhone: () => import("./ChangePhone"),
    ChangePass: () => import("./ChangePass")
  },
  data() {
    return {
      cityData: {},
      province: "",
      cityNames: [],
      provinces: [],
      city: "",
      minzuData: {},
      disabledCity: true,
      ChangePhone: false,
      ChangePass: false
    };
  },
  created() {
    this.formData = new FormData();
    getCity().then(res => {
      this.cityData = res.data;
      let keys = Object.keys(this.cityData);
      for (let i = 0; i < keys.length; i++) {
        this.provinces.push(this.cityData[keys[i]][0].province);
      }
    });
    getMinzu().then(res => {
      this.minzuData = res.data.data.map(item => {
        return item.name;
      });
    });
  },
  methods: {
    toggleChangePhone() {
      this.ChangePhone = !this.ChangePhone;
      if (this.ChangePhone) {
        document.body.style.overflow = "hidden";
      } else {
        document.body.style.overflow = "visible";
      }
    },
    toggleChangePass() {
      this.ChangePass = !this.ChangePass;
      if (this.ChangePass) {
        document.body.style.overflow = "hidden";
      } else {
        document.body.style.overflow = "visible";
      }
    },
    showCityNames() {
      this.disabledCity = false;
      let keys = Object.keys(this.cityData);
      for (let i = 0; i < keys.length; i++) {
        if (this.cityData[keys[i]][0].province === this.province) {
          for (
            let j = 0, k = Object.keys(this.cityData[keys[i]]).length;
            j < k;
            j++
          ) {
            this.cityNames.push(this.cityData[keys[i]][j].name);
          }
          break;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.info-form {
  padding: 10px;
  box-sizing: border-box;
  .input-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 20px;
    .el-form {
      height: auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .provinces {
        margin: 10px 0 0 0;
        input {
          font-size: 14px;
        }
      }
      .city {
        margin: 10px 0 0 0;
        margin-left: 30px;
        input {
          font-size: 14px;
        }
      }
    }
    label {
      font-size: 15px;
      margin: 5px 0;
      color: #455a64;
    }
    .input-item-change {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        span {
          font-size: 13px;
          color: #93999f;
          padding: 10px 0;
          display: block;
        }
      }
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
        width: 100px;
        height: 30px;
        font-size: 12px;
        border-radius: 20px;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }
    }
    .save {
      width: 100%;
      height: 50px;
      background-color: #409eff;
      border-radius: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      color: #fff;
    }
    .input-item-content {
      position: relative;
      width: 100%;
      input,
      textarea {
        color: #606266;
        width: 100%;
        height: 30px;
        font-size: 15px;
        outline: none;
        border: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        background: #fff;
        letter-spacing: 1px;
        &:focus ~ span {
          transform: scaleX(1);
        }
      }
      span:nth-of-type(1) {
        position: absolute;
        bottom: 0;
        left: 0;
        transform: scaleX(0);
        transition: all 0.3s ease-in-out;
        transform-origin: right center;
        width: 50%;
        height: 3px;
        background-color: rgba(179, 233, 114, 0.829);
      }
      span:nth-of-type(2) {
        position: absolute;
        transform: scaleX(0);
        transition: all 0.3s ease-in-out;
        transform-origin: left center;
        bottom: 0;
        right: 0;
        width: 50%;
        height: 3px;
        background-color: rgba(179, 233, 114, 0.9);
      }
    }
  }
}
</style>